<template>
  <div class="wrap">
    <div class="main">
      房号:<input type="text" v-model="roomId" />
      <button @click="join">加入房间</button>
      <br />
      <button @click="join2">加入房间2</button>
      <br />
      {{ remoteArr }}
    </div>
    <div class="side">
      <div class="mainVideo" id="local_stream"></div>
      <div >
        <div class="video" v-for="item in remoteArr" :key="item" :id="'remote_stream_' + item"></div>
      </div>
    </div>
  </div>
</template>

<script>
import TRTC from '@/utils/trtc'

export default {
  data() {
    return {
      TRTCInstance: null,
      userId: 'tony',

      // test Data
      roomId: 500,
      remoteArr: TRTC.remoteArr,
    }
  },
  mounted() {
    this.TRTCInstance = new TRTC(this.userId)

    console.log(this.TRTCInstance)
  },
  methods: {
    join() {
      this.TRTCInstance.TRTCJoin(this.roomId)
    },
    join2() {
      const r1 = Math.floor(Math.random() * 1000)
      const r2 = Math.floor(Math.random() * 1000)
      const t = new TRTC(''+r1+r2)

      t.TRTCJoin(this.roomId)
    },
  },
}
</script>
<style lang='less' scoped>
body {
  background: none !important;
}
#local_stream{
  height: 600px;
}
.mainVideo {
  width: 800px;
  height: 600px;
}
.video {
  width: 400px;
  height: 300px;
}

.wrap {
  height: 100%;
  display: grid;
  grid-template-columns: 200px 1fr;
}
</style>